<template>
  <div class="case-detail-page">
    <!-- 导航栏 -->
    <NavBar :theme-icon="themeIcon" />

    <!-- 案例头部banner -->
    <div class="case-header" v-if="currentCase" style="margin-top: 80px; padding-top: 40px;"> <!-- 添加顶部边距避免被导航栏遮挡 -->
      <div class="container">
        <div class="header-content">
          <div class="text-area">
            <h1 class="case-title">{{ currentCase.title }}</h1>
            <p class="case-subtitle">{{ currentCase.detail.overview }}</p>
            <div class="action-buttons">
              <button class="btn btn-lg btn-primary">立即咨询</button>
              <button class="btn btn-lg btn-outline">下载方案</button>
            </div>
          </div>
          <div class="image-area">
            <div class="hero-image">
              <img :src="caseImageUrl" alt="案例示意图" class="banner-image">
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="case-content" v-if="currentCase">
      <!-- 左侧边栏导航 -->
      <div class="side-nav">
        <div class="nav-sticky">
          <ul class="side-menu">
            <li class="menu-item active" @click="scrollToSection('overview')">
              <i class="fas fa-info-circle"></i>
              <span>解决方案</span>
            </li>
            <li class="menu-item" @click="scrollToSection('architecture')">
              <i class="fas fa-sitemap"></i>
              <span>系统架构</span>
            </li>
            <li class="menu-item" @click="scrollToSection('services')">
              <i class="fas fa-concierge-bell"></i>
              <span>核心服务</span>
            </li>
            <li class="menu-item" @click="scrollToSection('advantages')">
              <i class="fas fa-star"></i>
              <span>优势特点</span>
            </li>
            <li class="menu-item" @click="scrollToSection('images')">
              <i class="fas fa-images"></i>
              <span>案例图示</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="main-content">
        <!-- 解决方案 -->
        <section id="overview" class="content-section">
          <h2 class="section-title">解决方案</h2>
          <div class="section-content">
            <div class="content-with-image">
              <div class="content-text">
                <p>{{ currentCase.detail.overview }}</p>
                <p>该解决方案基于人工智能和大数据技术，为金融监管提供全方位的技术支持和创新应用，帮助实现监管工作的智能化、精准化和高效化。</p>
              </div>
              <div class="content-image">
                <img :src="solutionImageUrl" alt="解决方案示意图" class="section-image">
              </div>
            </div>
          </div>
        </section>

        <!-- 系统架构 -->
        <section id="architecture" class="content-section">
          <h2 class="section-title">系统架构</h2>
          <div class="section-content">
            <!-- 架构图 -->
            <div class="architecture-diagram" v-if="currentCase.detail.architectureImage">
              <img :src="currentCase.detail.architectureImage" :alt="`${currentCase.title}系统架构图`" class="diagram-image">
            </div>
            <div class="architecture-diagram" v-else>
              <img :src="'/img/architecture-default.svg'" :alt="`${currentCase.title}系统架构图`" class="diagram-image">
            </div>
            <p>{{ currentCase.detail.architecture }}</p>
          </div>
        </section>

        <!-- 核心服务 -->
        <section id="services" class="content-section">
          <h2 class="section-title">核心服务</h2>
          <div class="section-content">
            <div class="section-image-container">
              <img :src="servicesImageUrl" alt="核心服务示意图" class="section-image-large">
            </div>
            <div class="services-grid">
              <div v-for="(service, index) in currentCase.detail.services" :key="index" class="service-item">
                <div class="service-number">{{ index + 1 }}</div> <!-- 蓝色数字圆圈 -->
                <div class="service-content">
                  <h3 class="service-title">{{ service }}</h3>
                  <p class="service-desc">提供专业的{{ service }}服务，基于人工智能技术，实现自动化、智能化的业务处理流程。</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 优势特点 -->
        <section id="advantages" class="content-section">
          <h2 class="section-title">优势特点</h2>
          <div class="section-content">
            <!-- 新的优势特点示意图 -->
            <div class="section-image-container">
              <img :src="advantagesImageUrl" alt="优势特点示意图" class="section-image-large">
            </div>
            <div class="advantages-grid">
              <div v-for="(advantage, index) in currentCase.detail.advantages" :key="index" class="advantage-item">
                <div class="advantage-number">{{ index + 1 }}</div>
                <div class="advantage-content">
                  <h3 class="advantage-title">{{ advantage }}</h3>
                  <p class="advantage-desc">通过先进的AI技术和大数据分析，{{ advantage.replace(/^\S+\s+\S+/, '') }}，为监管决策提供有力支持。</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        <!-- 案例图示 -->
        <section id="images" class="content-section">
          <h2 class="section-title">案例图示</h2>
          <div class="section-content">
            <div class="case-images">
              <!-- PPT风格的图片展示 -->
              <div v-for="(image, index) in currentCase.detail.images" :key="index" class="image-slide">
                <div class="slide-container">
                  <img :src="image" :alt="`案例图片${index + 1}`" class="slide-image">

                  <!-- PPT风格装饰元素 -->
                  <div class="ppt-decoration">
                    <div class="corner top-left"></div>
                    <div class="corner top-right"></div>
                    <div class="corner bottom-left"></div>
                    <div class="corner bottom-right"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>


      </div>
    </div>

    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script>
import Footer from '@/layout/UserView/Footer.vue'
import NavBar from '@/layout/UserView/NavBar.vue'

export default {
  name: 'CaseDetail',
  components: {
    Footer,
    NavBar
  },
  data() {
    return {
      // 主题图标
      themeIcon: 'fas fa-moon',
      caseId: '',
      caseStudies: [
        {          id: 'data-analysis',          title: '数据分析',          description: '探索大模型技术在金融监管数据智能分析中的创新应用，提升监管效率与决策质量。',          icon: 'fas fa-chart-pie',          tag: '监管科技',          detail: {              overview: '本研究方向聚焦AI技术在金融监管数据分析领域的创新应用，通过大模型深度融合监管大数据，实现对金融市场运行、机构行为和风险状况的智能化监测与分析。研究成果已应用于金融监管决策支持、市场异常监测等关键场景，显著提升了监管效能和精准度。',              architecture: '系统构建了"数据中台+智能分析引擎+应用服务层"的三层架构。数据层整合监管核心数据、市场交易数据和外部宏观数据，通过联邦学习技术确保数据安全；分析层部署金融领域专用大模型，具备监管语义理解、跨模态分析和异常检测能力；应用层提供面向监管人员的智能分析工具和决策支持服务。',              architectureImage: '/img/architecture-data-analysis.svg',              services: [                '金融监管数据智能治理与标准化',                '跨市场交易行为异常识别分析',                '金融机构风险画像动态评估',                '监管政策效果智能量化分析',                'AI驱动的监管报表自动生成'              ],              advantages: [                '采用隐私计算技术，保障监管数据安全合规',                '显著提升分析效率，实现快速异常检测',                '大模型深度理解监管规则，提供精准分析结果',                '支持多维度数据关联分析，发现隐蔽风险',                '为监管决策提供可解释的智能分析依据'              ],            images: [              '/img/case-data-analysis-demo.svg'            ]          }        },
        {          id: 'trend-prediction',          title: '趋势预测',          description: '基于大模型的金融政策效果预测与市场趋势智能分析，提升监管前瞻性决策能力。',          icon: 'fas fa-chart-line',          tag: '前瞻决策',          detail: {              overview: '本研究方向探索AI技术在金融政策研究和市场预测领域的创新应用，通过深度融合政策文本、市场数据和宏观经济指标，构建智能预测模型，为金融监管提供前瞻性决策支持。研究成果已应用于货币政策效果评估、市场流动性预测等关键场景。',              architecture: '系统采用先进的多模态融合架构，整合了自然语言处理、时序预测和因果推断等技术。数据层构建金融政策知识库、历史市场数据库和宏观经济指标库；模型层部署监管专用大模型，具备政策文本深度理解、多情景模拟和因果分析能力；应用层提供政策效果预测、市场趋势分析和情景模拟工具。',              architectureImage: '/img/architecture-trend-prediction.svg',              services: [                '金融政策文本智能解读与效果预测',                '市场流动性趋势多情景分析',                '利率与汇率走势智能预测',                '宏观经济指标关联分析与预警',                '金融政策影响范围量化评估'              ],              advantages: [                '政策效果预测准确率提升75%，支持中长期趋势分析',                '基于大模型的政策意图深度理解',                '支持监管政策多情景模拟与优化',                '提供可解释的预测结果与依据',                '为金融监管前瞻性决策提供科学支撑'              ],            images: [              '/img/case-trend-prediction-demo.svg'            ]          }        },
        {          id: 'knowledge-qa',          title: '知识问答',          description: '基于大模型的金融监管知识智能问答与政策解读系统，赋能监管工作智能化升级。',          icon: 'fas fa-robot',          tag: '智能服务',          detail: {              overview: '本项目探索大模型技术在金融监管知识服务领域的创新应用，构建了覆盖政策法规、监管案例和专业知识的智能知识服务系统。通过知识增强的大模型技术，实现对复杂金融监管问题的精准解答和政策的深度解读，为监管人员提供智能化知识支撑。',              architecture: '系统采用"知识图谱+大模型"的混合增强架构，严格遵循金融监管信息安全管理规范。知识层构建包含金融政策法规、监管案例、研究成果的领域知识图谱；模型层通过知识注入技术增强大模型的金融专业能力；应用层提供智能问答、政策解读、知识检索等功能模块。',              architectureImage: '/img/architecture-knowledge-qa.svg',              services: [                '金融政策法规智能查询与深度解读',                '监管合规要求自动分析与提示',                '金融创新业务合规性智能评估',                '政策文件变更自动对比与分析',                '监管知识个性化推送与学习'              ],              advantages: [                '金融专业问答准确率达96%，响应速度提升80%',                '政策解读深度融合监管意图与实践要求',                '支持复杂监管问题的多步骤推理与解答',                '符合金融监管信息安全与保密要求',                '显著提升监管工作效率与决策质量'              ],            images: [              '/img/case-knowledge-qa-demo.svg'            ]
          }
        },
        {
          id: 'fintech-regulation',
          title: '金融监管科技创新应用',
          description: '利用AI技术构建智能监管平台，实现对金融机构的非现场监管、合规性自动检查和风险评估，提升监管效能。',
          icon: 'fas fa-shield-alt',
          tag: '监管科技',
            detail: {
              overview: '该项目为金融监管打造智能监管科技平台，通过AI技术赋能传统监管手段，实现监管的智能化、精准化和数字化。',
            architecture: '平台采用云端一体化架构，整合大数据、人工智能和区块链技术，构建监管数据中台和智能分析引擎，支持监管规则引擎和自动化检查工具。',
            architectureImage: '/img/architecture-fintech-regulation.svg',
            services: [
              '智能非现场监管系统',
              '合规性自动检查工具',
              '机构风险评级模型',
              '监管报表自动生成'
            ],
            advantages: [
                '监管效率提升70%',
                '人工审核工作量减少50%',
                '风险识别提前量增加30天',
              '监管决策支持能力显著增强'
            ],
            images: [
              '/img/case-regulation-1.svg',
              '/img/case-regulation-2.svg'
            ]
          }
        },
        {
          id: 'digital-currency',
          title: '央行数字货币应用生态',
          description: '基于区块链和AI技术的数字货币交易分析与管理系统，支持数字人民币的流通监控、数据分析和安全保障。',
          icon: 'fas fa-coins',
          tag: '数字货币',
          detail: {
            overview: '该项目围绕央行数字货币（数字人民币）构建应用生态系统，利用AI和区块链技术实现数字货币交易的全流程监控和智能分析。',
            architecture: '系统采用分布式架构，包含数字钱包管理、交易验证、智能合约执行、数据分析四大核心模块，通过AI技术实现交易行为分析和风险识别。',
            architectureImage: '/img/architecture-digital-currency.svg',
            services: [
              '数字货币交易监控',
              '资金流向智能分析',
              '反洗钱自动监测',
              '数字货币创新应用场景支持'
            ],
            advantages: [
              '交易监控覆盖率100%',
              '异常交易识别准确率达95%',
              '支持多场景数字货币应用',
              '为货币政策制定提供数据支持'
            ],
            images: [
              '/img/case-digital-1.svg',
              '/img/case-digital-2.svg'
            ]
          }
        },
        {
          id: 'risk-prevention',
          title: '金融风险智能防控体系',
          description: '构建跨市场金融风险监测预警系统，利用大数据和AI技术实现系统性金融风险的早期识别、评估和处置。',
          icon: 'fas fa-chart-line',
          tag: '风险防控',
            detail: {
              overview: '该项目为金融监管构建跨市场、跨机构的金融风险智能防控体系，实现对系统性金融风险的实时监测、早期预警和有效处置。',
            architecture: '系统采用多层次架构设计，整合银行、证券、保险等多领域数据，构建风险传导模型和压力测试系统，通过AI算法实现风险的智能识别和预警。',
            architectureImage: '/img/architecture-risk-control.svg',
            services: [
              '系统性风险监测预警',
              '金融市场异常波动分析',
              '机构关联性风险评估',
              '风险处置决策支持'
            ],
            advantages: [
              '风险预警提前量增加60%',
              '风险评估准确性提升75%',
              '支持多情景风险模拟',
              '为宏观审慎管理提供技术支撑'
            ],
            images: [
              '/img/case-risk-prevention-demo.svg'
            ]
          }
        }
      ]
    }
  },
  computed: {
    currentCase() {
      return this.caseStudies.find(caseItem => caseItem.id === this.caseId)
    },
    caseImageUrl() {
        // 使用实际存在的图片文件路径
        const homeCardImages = {
          'data-analysis': '/img/case-data-analysis-main.svg',
          'risk-prevention': '/img/case-risk-prevention-1.svg',
          'trend-prediction': '/img/case-trend-prediction-1.svg',
          'knowledge-qa': '/img/case-knowledge-qa-1.svg',
          'fintech-regulation': '/img/case-regulation-1.svg',
          'digital-currency': '/img/case-digital-1.svg',
          'risk-control': '/img/case-risk-1.svg'
        }
        return homeCardImages[this.caseId] || '/img/case-data-analysis-main.svg'
        },
    solutionImageUrl() {
      // 解决方案板块图片 - 为每个案例使用符合其主题的独特图片
      const caseImages = {
        'data-analysis': '/img/case-data-analysis-solution.svg',
        'risk-prevention': '/img/case-risk-prevention-solution.svg',
        'trend-prediction': '/img/case-trend-prediction-solution.svg',
        'knowledge-qa': '/img/case-knowledge-qa-solution.svg',
        'fintech-regulation': '/img/case-regulation-1.svg',
        'digital-currency': '/img/case-digital-1.svg',
        'risk-control': '/img/case-risk-1.svg'
      }
      return caseImages[this.caseId] || '/img/case-data-analysis-solution.svg'
    },
    servicesImageUrl() {
      // 核心服务板块图片 - 使用与解决方案不同的图片
      const serviceImages = {
        'data-analysis': '/img/case-data-analysis-1.svg',
        'risk-prevention': '/img/case-risk-prevention-services.svg',
        'trend-prediction': '/img/case-trend-prediction-services.svg',
        'knowledge-qa': '/img/case-knowledge-qa-services.svg',
        'fintech-regulation': '/img/img_5.png',
        'digital-currency': '/img/img_6.png',
        'risk-control': '/img/img_7.png'
      }
      return serviceImages[this.caseId] || '/img/img_2.png'
    },
    advantagesImageUrl() {
      // 优势特点板块图片 - 使用第三种不同的图片
      const advantageImages = {
        'data-analysis': '/img/case-data-analysis-advantages.svg',
        'risk-prevention': '/img/case-risk-prevention-advantages.svg',
        'trend-prediction': '/img/case-trend-prediction-advantages.svg',
        'knowledge-qa': '/img/case-knowledge-qa-advantages.svg',
        'fintech-regulation': '/img/img_4.png',
        'digital-currency': '/img/img_3.png',
        'risk-control': '/img/img_2.png'
      }
      return advantageImages[this.caseId] || '/img/case-data-analysis-advantages.svg'
    }
  },
  mounted() {
    // 获取路由参数中的caseId
    this.caseId = this.$route.params.id;
    
    // 初始化第一个菜单项为活动状态
    setTimeout(() => {
      this.setActiveSection('overview');
    }, 100);
    
    // 添加滚动事件监听器 - 使用防抖
    this.scrollHandler = this.debounce(this.handleScroll, 100);
    window.addEventListener('scroll', this.scrollHandler);
  },
  
  beforeDestroy() {
    // 移除滚动事件监听器
    if (this.scrollHandler) {
      window.removeEventListener('scroll', this.scrollHandler);
    }
  },
  methods: {
    // 防抖函数
    debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },
    
    // 点击菜单项滚动到指定区域
    scrollToSection(sectionId) {
      const element = document.getElementById(sectionId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
        // 立即设置活动项
        this.setActiveSection(sectionId);
      }
    },
    
    // 直接设置活动section
    setActiveSection(sectionId) {
      // 获取所有菜单项
      const menuItems = document.querySelectorAll('.menu-item');
      // 清除所有活动状态
      menuItems.forEach(item => {
        item.classList.remove('active');
      });
      
      // 找到对应的菜单项并设置活动状态
      // 使用数据属性而不是onclick属性查找，更可靠
      const targetItem = Array.from(menuItems).find((item, index) => {
        const order = ['overview', 'architecture', 'services', 'advantages', 'images'];
        return order[index] === sectionId;
      });
      
      if (targetItem) {
        // 强制重新计算样式以确保样式正确应用
        targetItem.style.display = 'none';
        targetItem.offsetHeight; // 触发重绘
        targetItem.style.display = '';
        
        // 添加活动类
        targetItem.classList.add('active');
      }
    },
    
    // 处理滚动事件
    handleScroll() {
      // 简单直接的滚动检测逻辑
      const sections = ['overview', 'architecture', 'services', 'advantages', 'images'];
      let currentSection = 'overview'; // 默认使用第一个
      let minDistance = Infinity;
      
      // 计算每个section到视口顶部的距离，选择最接近顶部的section
      sections.forEach(sectionId => {
        const section = document.getElementById(sectionId);
        if (section) {
          const rect = section.getBoundingClientRect();
          // 计算距离视口顶部的距离（负值表示在视口上方）
          const distance = Math.abs(rect.top);
          
          // 如果section大部分在视口内，优先选择
          if (rect.top <= 150 && rect.bottom >= 150) {
            currentSection = sectionId;
            return false; // 提前退出循环
          }
          
          // 否则选择距离视口顶部最近的section
          if (distance < minDistance) {
            minDistance = distance;
            currentSection = sectionId;
          }
        }
      });
      
      // 更新活动项
      this.setActiveSection(currentSection);
    }
  }
}
</script>

<style scoped>
/* Case Detail Page Styles */

/* CSS变量定义 - 直接在组件根元素类中定义，确保scoped样式下CSS变量正常工作 */
.case-detail-page {
  --primary: #1e40af;
  --primary-light: #3b82f6;
  --primary-dark: #1e3a8a;
  --secondary: #0f172a;
  --accent: #60a5fa;
  --bg-light: #f8fafc;
  --bg-white: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-light: #94a3b8;
  --border-light: #e2e8f0;
  --border-medium: #cbd5e1;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 6px 20px rgba(30, 64, 175, 0.12);
  --shadow-lg: 0 10px 30px rgba(30, 64, 175, 0.15);
  --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  --corner-size: 15px;
}

/* 页面容器 */
.case-detail-page {
  min-height: 100vh;
  background-color: var(--bg-light);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-primary);
}

/* 内容与图片布局 */
.content-with-image {
  display: flex;
  align-items: center;
  margin-left: -15px;
  margin-bottom: 20px;
}

.content-with-image > * {
  margin-left: 15px;
}

.content-text {
  flex: 1;
}

.content-image {
  flex: 1;
}

.section-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.section-image-large {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  margin-bottom: 30px;
}

.section-image-container {
  margin-bottom: 30px;
  text-align: center;
}

/* 导航栏样式 */
.case-nav {
  background-color: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-area {
  display: flex;
  align-items: center;
}

.logo {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.system-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.nav-links {
  display: flex;
  margin-left: -15px;
}

.nav-links a {
  margin-left: 15px;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.nav-link:hover {
  color: var(--primary);
}

.nav-actions .btn {
  padding: 8px 20px;
}

/* 案例头部banner */
.case-header {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
  margin-top: 0; /* 移除多余的margin-top，导航栏已使用sticky定位 */
}

.case-header::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  width: 40%;
  height: 80%;
  background: radial-gradient(circle, rgba(30, 64, 175, 0.1) 0%, rgba(30, 64, 175, 0) 70%);
  border-radius: 50%;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

/* 移除了子元素的margin-left，因为不再需要抵消父元素的负边距 */

.text-area {
  flex: 1;
}

.breadcrumb {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 15px;
  display: block;
}

.case-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 20px;
  line-height: 1.3;
}

.case-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 30px;
  max-width: 80%;
}

.action-buttons {
  display: flex;
  margin-left: -7.5px;
}

.action-buttons button {
  margin-left: 7.5px;
}

.image-area {
  flex: 1;
}

.hero-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.banner-image {
  width: 100%;
  height: auto;
  display: block;
}

/* PPT风格的覆盖层 */
.ppt-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.slide-indicators {
  display: flex;
  margin-left: -4px; /* 负边距，用于替代gap */
}

.slide-indicators .indicator {
  margin-left: 4px; /* 正边距，替代gap */
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
}

.indicator.active {
  background-color: white;
}

.slide-title {
  font-weight: 600;
}

/* 主要内容区域 */
.case-content {
  display: flex;
  align-items: flex-start;
  max-width: 1200px;
  margin: 20px auto 0;
  padding: 20px;
  background-color: var(--bg-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 100;
}

/* 为子元素添加正边距，替代gap属性 */
.case-content > * {
  margin-left: 20px;
}

.side-nav {
  flex: 0 0 260px;
  margin-top: 20px;
}

.main-content {
  flex: 1;
  padding: 20px;
  min-height: 600px;
  margin-left: 20px; /* 确保主内容与侧边栏有间距 */
}

/* 左侧边栏导航 */
.side-nav {
  flex: 0 0 260px;
}

.nav-sticky {
  position: sticky;
  top: 80px;
}

.side-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  cursor: pointer;
  transition: var(--transition);
  border-bottom: 1px solid var(--border-light);
}

.menu-item i {
  margin-right: 15px; /* 替代gap属性 */
  width: 20px;
  text-align: center;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:hover {
  background-color: var(--bg-light);
  color: var(--primary);
}

.menu-item.active {
  background-color: var(--primary) !important;
  color: white !important;
  font-weight: 600;
  position: relative;
  z-index: 10;
  /* 确保背景色不会被覆盖 */
  box-shadow: inset 0 0 0 1000px var(--primary);
  border-left: 4px solid var(--primary-light);
}

.menu-item i {
  width: 20px;
  text-align: center;
}

/* 右侧主内容 */
.main-content {
  flex: 1;
}

.content-section {
  background-color: var(--bg-white);
  border-radius: var(--radius-md);
  padding: 40px;
  margin-bottom: 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--accent);
}

.section-content p {
  margin-bottom: 15px;
  color: var(--text-secondary);
}

/* 架构图 */
.architecture-diagram {
  margin: 30px 0;
  text-align: center;
}

.diagram-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

/* 服务网格 */
.services-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 30px -10px 0;
}

.service-item {
  flex: 0 0 calc(50% - 20px);
  margin: 0 10px 20px;
  box-sizing: border-box;
  display: flex;
  padding: 20px;
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.service-content {
  margin-left: 15px;
  flex: 1;
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-sm);
}

.service-number {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--primary); /* 使用更深的主色调 */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.1rem;
  margin-right: 15px; /* 增加与文本的间距 */
}

.service-content {
  flex: 1;
}

.service-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.service-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
}

/* 优势特点网格 */
.advantages-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 30px -10px 0;
}

.advantage-item {
  flex: 0 0 calc(50% - 20px);
  margin: 0 10px 20px;
  box-sizing: border-box;
  display: flex;
  padding: 20px;
  background-color: var(--bg-light);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}

.advantage-content {
  margin-left: 15px;
  flex: 1;
}

.advantage-number {
  margin-right: 15px; /* 替代gap属性 */
}

.advantage-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-sm);
}

.advantage-number {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--primary-light);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
}

.advantage-content {
  flex: 1;
}

.advantage-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.advantage-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
}

/* 案例图示 - PPT风格 */
.case-images {
  display: flex;
  flex-direction: column;
}

/* 图片网格布局 */
.images-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 20px -7.5px 0;
}

.image-item {
  flex: 0 0 calc(33.333% - 15px);
  margin: 0 7.5px 15px;
  box-sizing: border-box;
}

.image-slide {
  margin-bottom: 40px; /* 替代gap属性 */
}

.image-slide {
  margin-bottom: 40px;
}

.slide-container {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: var(--transition);
}

.slide-container:hover {
  transform: translateY(-10px);
}

.slide-image {
  width: 100%;
  height: auto;
  display: block;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30, 64, 175, 0.9);
  color: white;
  padding: 20px;
}

.slide-caption h3 {
  margin: 0 0 10px 0;
  font-size: 1.3rem;
}

.slide-caption p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}

/* PPT装饰元素 */
.ppt-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.corner {
  position: absolute;
  width: var(--corner-size);
  height: var(--corner-size);
  border-color: var(--primary);
  opacity: 0.7;
}

.corner.top-left {
  top: 15px;
  left: 15px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.corner.top-right {
  top: 15px;
  right: 15px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.corner.bottom-left {
  bottom: 15px;
  left: 15px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.corner.bottom-right {
  bottom: 15px;
  right: 15px;
  border-bottom: 2px solid;
  border-right: 2px solid;
}

/* 联系咨询区域 */
.contact-section {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  border-radius: var(--radius-md);
  padding: 40px;
  margin-top: 40px;
}

.contact-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-right {
  margin-left: 40px; /* 替代gap属性 */
}

.contact-left h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.contact-left p {
  margin: 0;
  opacity: 0.9;
}

.contact-right {
  display: flex;
  margin-left: -7.5px;
}

.contact-right > * {
  margin-left: 7.5px;
}

/* 操作按钮容器 */
.action-buttons {
  display: flex;
  margin-top: 24px;
}

/* 确保按钮在所有浏览器中都有足够间距 */
.action-buttons .btn:not(:first-child) {
  margin-left: 30px;
}

/* 确保按钮在低版本浏览器中也有足够间距 */
.action-buttons .btn:nth-child(2) {
  margin-left: 30px;
}

/* 按钮样式 */
.btn {
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 1rem;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(30, 64, 175, 0.4);
}

.btn-outline {
  background-color: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background-color: var(--primary);
  color: white;
}

.btn-lg {
  padding: 12px 30px;
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .header-content {
    flex-direction: column;
    text-align: center;
  }
  
  .case-title {
    font-size: 2rem;
  }
  
  .case-subtitle {
    max-width: 100%;
  }
  
  .case-content {
    flex-direction: column;
  }
  
  .side-nav {
    flex: 1;
  }
  
  .nav-sticky {
    position: static;
  }
  
  .contact-container {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .content-section {
    padding: 25px;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  .services-grid,
  .advantages-grid {
    margin: 30px 0 0;
  }
  
  .service-item,
  .advantage-item {
    flex: 0 0 100%;
    margin: 0 0 20px;
  }
  
  .contact-section {
    padding: 25px;
  }
}
</style>